<template>
    <div id="app">
        <!-- <div class="iconfont icon-toast-jinggao"></div>
        <div class="iconfont icon-loading"></div> -->
        <transition name="slide">
            <Toast v-show="isShowToast"></Toast>
        </transition>
        <Topbar :key="keyVal"></Topbar>

        <Header></Header>
        <router-view @updatekey="updatekeyFn" />
        <Footer></Footer>
        <Login v-show="isShowLoginModal"></Login>
    </div>
</template>
<script>
import Topbar from '@/components/Topbar.vue';
import Footer from '@/components/Footer.vue';
import Header from '@/components/Header';
import Login from '@/components/Login.vue';
import Toast from '@/components/Toast';
// import axios from 'axios';
import { JinPinAPI } from '@/request/api';
import { mapState } from 'vuex';

export default {
    data() {
        return {
            keyVal: 0,
        };
    },
    components: {
        Topbar,
        Footer,
        Header,
        Login,
        Toast,
    },
    provide() {
        return {
            adds: this,
        };
    },
    watch: {
        '$route.path': {
            handler(oldVal, newVal) {
                if (oldVal != newVal) {
                    this.keyVal++;
                }
            },
        },
    },
    computed: {
        ...mapState({
            isShowLoginModal: state => state.showmodal.isShowLoginModal,
            isShowToast: state => state.showtoast.isShowToast,
        }),
    },
    //1.这样写的话会重复的去编写请求地址，如果地址发生改变，我们需要去一个一个的修改
    //2.可能会出现回调地狱的问题
    //3.每次发起请求，都需要携带token

    // 解决方式
    //1.对axios进行函数封装，创建request 文件夹下创建request.js文件
    //2.创建一个axios的实例 并且输出
    //3.创建api.js接口文件
    /*  created() {
        axios.get('/products/recommend').then(res => {
            console.log('请求成功', res);
        });
    }, */
    async created() {
        // 是函数，所以要调用
        // JinPinAPI().then(res => {
        //     console.log(res);
        // });
        let res = await JinPinAPI();
        console.log(res);
    },
    methods: {
        updatekeyFn() {
            this.keyVal++;
        },
    },
};
</script>

<style lang="less">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter,
.slide-leave-to {
    opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
    transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
    opacity: 1;
}
</style>
